{% extends "dash/base.html" %}
{% block content %} 

   <script type="text/javascript">
   
   $('#timedisp').hide();
   $('#intraffic').hide();
   $('#protdisp').show();
   $('#outtraffic').hide();
   $('#srch').hide();
   $('#atck').hide();


function drawgraph_protocol()
{ 
           $('#chart5').empty();
          
           var data2 = [{% for item in slist6 %}
                                    { "bytes" :"{{ item.bytes }}",
                                      "packets" :"{{ item.packets }}",
                                      "protocol" :"{{ item.protocol }}",                  
                                    },

                                    {% endfor %}
                                   ];

          
           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
           
           
           var x = d3.scale.ordinal()
                      .rangePoints([0, width - margin.left - margin.right]);
	    var y = d3.scale.linear()
                      .domain([0, d3.max(data2, function(d) { return d.bytes; })])
                      .range([height - margin.top - margin.bottom, 0]);
            x.domain(data2.map(function(d) { return d.protocol; }));
	    var xAxis = d3.svg.axis()
                              .scale(x)
                              .orient("bottom");
            var yAxis = d3.svg.axis()
    			  .scale(y)
    			  .orient('left')
    			  .tickPadding(10);
	    var svg = d3.select('#chart5').append('svg')
    			.attr('class', 'chart')
   		        .attr('width', width)
    			.attr('height', height)
  			.append('g')
   		        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
	    svg.selectAll('.chart')
    	       .data(data2)
 	       .enter().append('rect')
    	       .attr('class', 'bar')
    	       .attr('x', function(d) { return x(d.protocol); })
               .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.bytes)) })
               .attr('width', 10)
               .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.bytes) });
            svg.append("text")      // text label for the x axis
                .attr("x", width/2 )
                .attr("y",  (height-margin.top) )
                .style("text-anchor", "middle")
                .text("Protocol");
            svg.append('g')
               .attr('class', 'x axis')
               .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
             svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("packets");
            svg.append('g')
               .attr('class', 'y axis')
               .call(yAxis);
            var tablecontents = "";
                tablecontents = "<table>"; 
                tablecontents += "<thead>";
                tablecontents += "<tr>";
                tablecontents += "<th>";
                tablecontents += "index";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "protocol";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "bytes";
                tablecontents += "</th>";
                tablecontents += "</tr>";
                tablecontents += "</thead>";
            for (var i = 0; i < data2.length; i ++)
            {
      		var emp = data2[i].protocol;
      		var byt = data2[i].bytes;
      		tablecontents += "<tr>";
      		tablecontents += "<td>" + (i+1) + "</td>";
     	        tablecontents += "<td>" + emp + "</td>";
      		tablecontents += "<td>" + byt + "</td>";
      		tablecontents += "</tr>";
   	    }
            tablecontents += "</table>";
  	    document.getElementById("table5").innerHTML = tablecontents;
	    $("#table5").hide(); 
            $("#but3").click(function() { 
		$("#table5").show();
		});
       
       }

     function protocol_bytes()
       {
             $('#chart6').empty();
            
             var data2 = [{% for item in slist6 %}
                                    { "id" : "{{ item.id }}",
                                      "bytes" :"{{ item.bytes }}",
                                      "packets" :"{{ item.packets }}",
                                      "protocol" :"{{ item.protocol }}",                  
                                    },

                                    {% endfor %}
                                   ];
           
           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
           
           
           var x = d3.scale.ordinal()
                      .rangePoints([0, width - margin.left - margin.right]);
            var y = d3.scale.linear()
                      .domain([0, d3.max(data2, function(d) { return d.packets; })])
                      .range([height - margin.top - margin.bottom, 0]);
	    x.domain(data2.map(function(d) { return d.protocol; }));
	    var xAxis = d3.svg.axis()
                              .scale(x)
                              .orient("bottom");
            var yAxis = d3.svg.axis()
                          .scale(y)
                          .orient('left')
                          .tickPadding(10);
	    var svg = d3.select('#chart6').append('svg')
    			.attr('class', 'chart')
    			.attr('width', width)
    			.attr('height', height)
  			.append('g')
    			.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
	    svg.selectAll('.chart')
               .data(data2)
               .enter().append('rect')
               .attr('class', 'bar')
               .attr('x', function(d) { return x(d.protocol); })
    	       .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.packets)) })
    	       .attr('width', 10)
               .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.packets) });
            svg.append("text")      // text label for the x axis
                .attr("x", width/2 )
                .attr("y",  (height-margin.top) )
                .style("text-anchor", "middle")
                .text("Protocol");
	    svg.append('g')
               .attr('class', 'x axis')
               .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
            svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("packets");
            svg.append('g')
               .attr('class', 'y axis')
               .call(yAxis);
            var tablecontents = "";
                tablecontents = "<table>"; 
                tablecontents += "<thead>";
                tablecontents += "<tr>";
                tablecontents += "<th>";
                tablecontents += "index";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "protocol";
                tablecontents += "</th>";
                tablecontents += "<th>";
                tablecontents += "packet";
                tablecontents += "</th>";
                tablecontents += "</tr>";
                tablecontents += "</thead>";
            for (var i = 0; i < data2.length; i ++)
            {
      		var emp = data2[i].protocol;
      		var pck = data2[i].packets;
      		tablecontents += "<tr>";
      		tablecontents += "<td>" + (i+1) + "</td>";
     	        tablecontents += "<td>" + emp + "</td>";
      		tablecontents += "<td>" + pck + "</td>";
      		tablecontents += "</tr>";
   	    }
            tablecontents += "</table>";
  	    document.getElementById("table6").innerHTML = tablecontents;
	    $("#table6").hide(); 
		$("#but4").click(function() { 
		$("#table6").show();
		});
       }

drawgraph_protocol();

</script>
{% endblock %}
 
 
